<template>
  <div class="certification-page">
    <div class="page-header">
      <h2>您还未认证专业号</h2>
      <p>请先选择您后续经营方向</p>
    </div>
    <div class="benefits-section">
      <h3 class="section-title">推广投放权益</h3>
      <div class="benefits-grid">
        <div class="benefit-card">
          <span class="icon pen"></span>
          <h4>主页编辑</h4>
          <p>账号主页支持个性化设置，主页品牌内容更精美，含：店铺设置、关联话题、头像名字</p>
        </div>
        <div class="benefit-card">
          <span class="icon user"></span>
          <h4>身份标识</h4>
          <p>账号主页展示蓝V，加强账号官方品牌背书</p>
        </div>
        <div class="benefit-card">
          <span class="icon lottery"></span>
          <h4>抽奖笔记</h4>
          <p>可实现在活动笔记中设置抽奖能力，并设置奖项和开奖时间等促进用户转化</p>
        </div>
        <div class="benefit-card">
          <span class="icon store"></span>
          <h4>门店认领</h4>
          <p>如企业有线下门店在营业，即可通过门店认领，实现将线下门店店铺信息展示在账号首页</p>
        </div>
        <div class="benefit-card">
          <span class="icon search"></span>
          <h4>搜索权益</h4>
          <p>完成品牌认证和品牌认领后，即可拥有社区搜索权益，用户搜索关键词即可看见账号。</p>
        </div>
        <div class="benefit-card">
          <span class="icon topic"></span>
          <h4>话题认领</h4>
          <p>每个企业号都可以免费申请一个商业话题，实现聚合相关优质的UGC内容</p>
        </div>
        <div class="benefit-card">
          <span class="icon data"></span>
          <h4>数据洞察</h4>
          <p>涵盖账号概览、笔记表现、粉丝数据、个人主页、话题数据、员工交易数据等等</p>
        </div>
        <div class="benefit-card">
          <span class="icon matrix"></span>
          <h4>账号矩阵</h4>
          <p>实现企业员工号（KOS）、主理人、副企业等绑定模式，提高矩阵经营价值</p>
        </div>
        <div class="benefit-card">
          <span class="icon private"></span>
          <h4>私信组件</h4>
          <p>可设置常用话术、欢迎语、私卡片等，提高私信回复效率，增强粉丝互动价值</p>
        </div>
        <div class="benefit-card">
          <span class="icon reply"></span>
          <h4>私信回复</h4>
          <p>实现更全面更高效的私信回复能力和管理能力</p>
        </div>
        <div class="benefit-card">
          <span class="icon promote"></span>
          <h4>推广投放</h4>
          <p>在小红书推广投放平台进行投放计划创建，对直播间、笔记等进行推广</p>
        </div>
        <div class="benefit-card">
          <span class="icon shop"></span>
          <h4>小红书店铺（需单独申请）</h4>
          <p>开通小红书店铺，进行电商经营，获得相关经营工具及政策支持</p>
        </div>
      </div>
    </div>
    <div class="process-section">
      <h3 class="section-title">开通流程</h3>
      <div class="process-steps">
        <div class="step">
          <div class="step-number">1</div>
          <h4>提交材料</h4>
          <span class="step-time">约30分钟</span>
          <p>上传营业执照，行业资质等入驻所需材料</p>
        </div>
        <div class="step-divider"></div>
        <div class="step">
          <div class="step-number">2</div>
          <h4>平台审核</h4>
          <span class="step-time">约3-5个工作日</span>
          <p>平台审核材料，审核通过即可开通相应功能</p>
        </div>
      </div>
    </div>
    <footer class="page-footer">
      <nav>
        <a href="#">关于小红书</a>
        <a href="#">帮助中心</a>
        <a href="#">侵权投诉</a>
      </nav>
    </footer>
  </div>
</template>
<style scoped>
.certification-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.page-header {
  text-align: center;
  margin-bottom: 48px;
}
.page-header h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 8px;
}
.page-header p {
  font-size: 16px;
  color: #666;
}
.section-title {
  font-size: 20px;
  color: #333;
  text-align: center;
  margin-bottom: 32px;
  font-weight: 600;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}
.benefit-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.benefit-card .icon {
  width: 24px;
  height: 24px;
  margin-bottom: 16px;
  background-size: contain;
  background-repeat: no-repeat;
}

.icon.pen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.84 3.75 3.75M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z'/%3E%3C/svg%3E"); }
.icon.user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0 7c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4zm6 5H6v-.99c.2-.72 3.3-2.01 6-2.01s5.8 1.29 6 2v1z'/%3E%3C/svg%3E"); }
.icon.lottery { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M19 3H5c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E"); }
.icon.store { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M17 10H7V8h10v2zm4-7h-3V1h-2v2H8V1H6v2H3c-1.11 0-2 .89-2 2v14c0 1.1.89 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 16H3V5h18v11z'/%3E%3C/svg%3E"); }
.icon.search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"); }
.icon.topic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E"); }
.icon.data { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H5V5h14v12zm-6-6h-4v2h4v-2zm0-4h-4V7h4v2zm0-4h-4V3h4v2z'/%3E%3C/svg%3E"); }
.icon.matrix { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M3 3v18h18V3H3zm8 14H9v-2h2v2zm0-4H9V9h2v4zm0-6H9V5h2v2zm6 10h-2v-2h2v2zm0-4h-2V9h2v4zm0-6h-2V5h2v2z'/%3E%3C/svg%3E"); }
.icon.private { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E"); }
.icon.reply { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E"); }
.icon.promote { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zm0 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm1-13h-2v6h2v-6zm0 8h-2v2h2v-2z'/%3E%3C/svg%3E"); }
.icon.shop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M18 9V5h-2v4h-4V5h-2v4H6V5c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2v4h2zm-6 11c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm4-6h-4v-4h4v4z'/%3E%3C/svg%3E"); }
.benefit-card h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 600;
}
.benefit-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  flex-grow: 1;
}
.process-section {
  margin-bottom: 48px;
}
.process-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 20%;
  right: 20%;
  height: 1px;
  background-color: #eaeaea;
  z-index: 1;
}
.step {
  text-align: center;
  position: relative;
  z-index: 2;
  background-color: #fff;
  padding: 0 16px;
}
.step-number {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  background-color: #409eff;
  color: #fff;
  margin: 0 auto 8px;
  font-size: 14px;
}
.step h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
  font-weight: 600;
}
.step-time {
  display: inline-block;
  font-size: 12px;
  color: #00b42a;
  background-color: #e6f7ed;
  padding: 2px 8px;
  border-radius: 12px;
  margin-bottom: 4px;
}
.step p {
  font-size: 14px;
  color: #666;
}
.step-divider {
  flex-grow: 1;
  height: 1px;
  background-color: #eaeaea;
  position: relative;
}
.step-divider::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 9px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
}
.page-footer {
  text-align: center;
  padding: 24px 0;
  border-top: 1px solid #eee;
}
.page-footer nav a {
  color: #999;
  text-decoration: none;
  margin: 0 12px;
  font-size: 14px;
}
</style>